<template>
  <div class="app-container">
    <split-pane split="vertical" :default-percent="20">
      <template slot="paneL">
        <el-scrollbar wrapClass="scrollbar-wrapper">
          <div class="tree">
            <el-tree
              @node-click="handleNodeClick"
              ref="vuetree"
              :check-strictly="true"
              highlight-current
              check-on-click-node
              node-key="UUID"
              default-expand-all
              :data="data"
              :props="defaultProps"
            ></el-tree>
          </div>
        </el-scrollbar>
      </template>
      <template slot="paneR" :default-percent="70">
        <!-- 右侧页面 -->
        <div class="right-detail" ref="flexDiv">
          <div class="top-type" ref="flexTable">
            <div class="btn-area">
              <buttonName @clickEvent="clickEvent" class="btn"></buttonName>
              <!--              <el-button-->
              <!--                class="btn"-->
              <!--                plain-->
              <!--                type="primary"-->
              <!--                @click="addRefType"-->
              <!--                :disabled="typeAddDisabled"-->
              <!--                v-if="isAuth('supplierManagementAdd')"-->
              <!--              >新增模块-->
              <!--              </el-button>-->
              <!--              <el-button-->
              <!--                class="btn"-->
              <!--                plain-->
              <!--                type="primary"-->
              <!--                @click="editRefType"-->
              <!--                :disabled="typeEditDisabled"-->
              <!--                v-if="isAuth('supplierManagementEdit')"-->
              <!--              >修改模块-->
              <!--              </el-button>-->
              <!--              <el-button-->
              <!--                class="btn"-->
              <!--                plain-->
              <!--                type="primary"-->
              <!--                @click="delRefType"-->
              <!--                :disabled="typeDelDisabled"-->
              <!--                v-if="isAuth('supplierManagementDel')"-->
              <!--              >删除模块-->
              <!--              </el-button>-->
            </div>
            <fieldset>
              <legend style="font-size: 1.5rem;">菜单信息</legend>
              <el-form label-position="right" size="mini" label-width="11rem" :model="currentType">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="菜单序号：">
                      <span>{{ currentType.mdlSeq }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="菜单代码：">
                      <span>{{ currentType.mdlCode }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="菜单名称：">
                      <span>{{ currentType.mdlName }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24" style="word-break:break-all;">
                    <el-form-item label="URL地址：">
                      <span>{{ currentType.mdlUrl }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="是否平台菜单：">
                      <el-checkbox
                        v-model="currentType.mdlIsp"
                        true-label="Y"
                        false-label="N"
                        disabled
                      ></el-checkbox>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="是否可用：">
                      <el-checkbox
                        v-model="currentType.mdlValid"
                        disabled
                        true-label="Y"
                        false-label="N"
                      ></el-checkbox>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </fieldset>
          </div>
          <div class="bottom-code">
            <div class="flex-table">
              <div class="inner">
                <fieldset style="min-width:95%;">
                  <legend style="font-size: 1.5rem;">功能列表</legend>
                  <el-table
                    :data="currentType.moduleChildrenGrand"
                    :height="maxHeight"
                    highlight-current-row
                    @row-click="getCurrentCodeRow"
                    :header-cell-style="{ textAlign: 'center' }"
                    border
                  >
                    <el-table-column prop="mdlSeq" align="center" width="70" label="序号"></el-table-column>
                    <!--绑定中英文  -->
                    <el-table-column prop="mdlCode" show-overflow-tooltip align="left" label="功能代码"></el-table-column>
                    <el-table-column prop="mdlName" show-overflow-tooltip align="left" label="功能名称"></el-table-column>
                    <el-table-column label="是否可用" align="center">
                      <template slot-scope="scope">
                        <el-checkbox
                          v-model="scope.row.mdlValid"
                          true-label="Y"
                          false-label="N"
                          :key="scope.$index"
                          disabled
                        ></el-checkbox>
                      </template>
                    </el-table-column>
                  </el-table>
                </fieldset>
              </div>
            </div>
          </div>
        </div>
      </template>
    </split-pane>

    <!-- 代码分类dialog -->
    <el-dialog
      width="1000px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      v-el-drag-dialog
      :title="dialogTitle"
      :visible.sync="RefTypeDialogVisible"
      v-if="RefTypeDialogVisible"
      :before-close="handleTypeDialogClose"
    >
      <el-form
        label-position="right"
        :model="RefTypeData"
        ref="RefTypeData"
        :rules="RefTypeDataRules"
        label-width="12rem"
        size="mini"
      >
        <fieldset>
          <legend style="font-size: 1.5rem;">菜单信息</legend>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="mdlSeq" label="菜单序号：">
                <el-input v-model="RefTypeData.mdlSeq" maxlength="4" @keyup.native="checkCode"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="mdlCode" label="菜单代码：">
                <el-input
                  v-model="RefTypeData.mdlCode"
                  maxlength="16"
                  placeholder="请输入英文字母"
                  @keyup.native="checkCode"
                  @change="uppercase('mdlCode')"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="mdlLevel" label="菜单等级：">
                <el-input :value="RefTypeData.mdlLevel" filterable clearable disabled></el-input>
                <!-- <el-select v-model="RefTypeData.mdlLevel" filterable clearable disabled>
                  <el-option
                    v-for="item in levelList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>-->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="mdlName" label="菜单名称：">
                <el-input v-model="RefTypeData.mdlName" maxlength="32"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="mdlUrl" label="URL地址：">
                <el-input v-model="RefTypeData.mdlUrl" maxlength="150"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="mdlIsp" label="是否平台菜单：">
                <el-checkbox v-model="RefTypeData.mdlIsp" true-label="Y" false-label="N"></el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="mdlValid" label="是否可用：">
                <el-checkbox v-model="RefTypeData.mdlValid" true-label="Y" false-label="N"></el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>
        </fieldset>
        <el-button
          class="btn"
          style="margin-top:1rem"
          plain
          type="primary"
          :disabled="isSecond"
          @click="addRefCode"
        >新增功能
        </el-button>
        <fieldset class="tableStyle">
          <legend style="font-size: 1.5rem;">功能列表</legend>
          <el-table
            cell-class-name="cell-form"
            size="mini"
            :data="RefTypeData.moduleChildrenGrand"
            border
            style="width: 100%"
            highlight-current-row
            :header-cell-style="{ textAlign: 'center' }"
          >
            <el-table-column
              show-overflow-tooltip
              label-class-name=" "
              label="序号"
              width="100"
              align="center"
              prop="mdlSeq"
            >
              <template slot-scope="scope">
                <el-form-item
                  class="table-form"
                  :prop="'moduleChildrenGrand.' + scope.$index + '.mdlSeq'"
                  :rules="RefCodeDataRules.mdlSeq"
                  label-width="0px"
                >
                  <el-input
                    :title="scope.row.mdlSeq"
                    size="mini"
                    v-model="scope.row.mdlSeq"
                    @keyup.native="checkChildrenCode(scope.$index)"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              label-class-name="title"
              prop="mdlCode"
              label="功能代码"
              min-width="180"
              align="left"
            >
              <template slot-scope="scope">
                <el-form-item
                  class="table-form"
                  :prop="'moduleChildrenGrand.' + scope.$index + '.mdlCode'"
                  :rules="RefCodeDataRules.mdlCode"
                  label-width="0px"
                >
                  <el-input
                    size="mini"
                    :title="scope.row.mdlCode"
                    v-model="scope.row.mdlCode"
                    placeholder="请输入英文字母"
                    @keyup.native="checkChildrenCode(scope.$index)"
                    @change="upperChildCase(scope.$index)"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              label-class-name="title"
              prop="mdlName"
              label="功能名称"
              min-width="180"
              align="left"
            >
              <template slot-scope="scope">
                <el-form-item
                  class="table-form"
                  :prop="'moduleChildrenGrand.' + scope.$index + '.mdlName'"
                  :rules="RefCodeDataRules.mdlName"
                  label-width="0px"
                >
                  <el-input size="mini" v-model="scope.row.mdlName"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="是否可用" width="140" align="center">
              <template slot-scope="scope">
                <el-form-item class="table-form" label-width="0px">
                  <el-checkbox
                    v-model="scope.row.mdlValid"
                    true-label="Y"
                    false-label="N"
                    :key="scope.$index"
                  ></el-checkbox>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              :label="$t('message.operation')"
              min-width="100"
              align="center"
            >
              <template slot-scope="scope">
                <el-form-item class="table-form" label-width="0px">
                  <span
                    class="el-tag el-tag--danger el-tag--mini"
                    style="cursor: pointer;"
                    @click="delRefCode(scope.row, scope.$index)"
                    v-show="!isChange"
                  >删除</span>
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </fieldset>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button class="btn" @click="handleTypeDialogClose">关闭</el-button>
        <el-button class="btn" type="primary" @click="commitType">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {addInfoList, checkSysList, delInfoList, editInfoList} from '@/request/api'
import isAuth from '@/mixins/buttonAuth'
import {toString} from '@/utils/utils'
import resizeMixin from '@/mixins/resize'
import buttonName from '@/components/buttonName/button-name'

export default {
  name: 'router.sysmodule',
  mixins: [resizeMixin, isAuth],
  data() {
    return {
      dialogTitle: '',
      isChange: true,
      maxHeight: -1,
      data: [
        {
          father: '',
          RV_REFERRED: '菜单',
          moduleChildrenGrand: []
        }
      ],
      defaultProps: {
        label: 'mdlName',
        children: 'moduleChildren'
      },
      TypeMap: {
        updateType: 'baseCode.editClassify',
        createType: 'baseCode.addClassify'
      },
      CodeMap: {
        updateCode: 'baseCode.editCode',
        createCode: 'baseCode.addCode'
      },
      levelList: [
        {label: '一级菜单', value: '1'},
        {label: '二级菜单', value: '2'},
        {label: '三级菜单', value: '3'}
      ], // 菜单等级
      isSecond: true,
      inputDisabled: false,
      // 按钮是否可用的状态
      typeAddDisabled: true,
      typeEditDisabled: true,
      typeDelDisabled: true,
      CodeAddDisabled: true,
      CodeEditDisabled: true,
      CodeDelDisabled: true,
      //
      TypeDialogStatus: '',
      CodeDialogStatus: '',
      currentNode: {},
      currentType: {},
      codeNum: 0,
      currentCodeList: [],
      currentCode: {},
      RefTypeDialogVisible: false, // 代码分类 Dialog
      RefCodeDialogVisible: false, // 基础代码 Dialog
      // 最新添加的代码分类的RV_DOMAIN 通过这个判断是否最新添加的代码分类并高亮显示
      lastRefTypeRV_DOMAIN: '',
      // 代码分类
      RefTypeData: {
        moduleChildrenGrand: []
      }, // 代码分类 dialog内的form
      RefTypeDataRules: {
        mdlSeq: [
          {required: true, message: '请填写菜单序号', trigger: 'blur'}
          // { min: 1, max: 4, message: '至多输入4个字符', trigger: 'blur' }
        ],
        mdlCode: [
          {required: true, message: '请填写菜单代码', trigger: 'blur'}
          // { min: 1, max: 16, message: '至多输入16个字符', trigger: 'blur' }
        ],
        mdlName: [
          {required: true, message: '请填写菜单名称', trigger: 'blur'},
          {min: 1, max: 32, message: '至多输入32个字符', trigger: 'blur'}
        ],
        mdlUrl: [
          {min: 1, max: 150, message: '至多输入150个字符', trigger: 'blur'}
        ]
      },
      RefCodeDataRules: {
        mdlSeq: [
          {required: true, message: '请填写序号', trigger: 'blur'}
          // { min: 1, max: 4, message: '至多输入4个字符', trigger: 'blur' }
        ],
        mdlCode: [
          {required: true, message: '请填写功能代码', trigger: 'blur'}
          // { min: 1, max: 16, message: '至多输入16个字符', trigger: 'blur' }
        ],
        mdlName: [
          {required: true, message: '请填写功能名称', trigger: 'blur'}
          // { min: 1, max: 32, message: '至多输入32个字符', trigger: 'blur' }
        ]
      }
    }
  },
  components: {buttonName},
  computed: {},
  beforeMount() {
    this.getRefTypeList()
  },
  methods: {
    clickEvent(val) {
      if (val.mdlCode === 'supplierManagementAdd') {
        this.addRefType()
      }
      if (val.mdlCode === 'supplierManagementEdit') {
        this.editRefType()
      }
      if (val.mdlCode === 'supplierManagementDel') {
        this.delRefType()
      }
    },
    checkCode() {
      this.RefTypeData.mdlCode = this.RefTypeData.mdlCode.replace(
        /[^a-zA-Z]/g,
        ''
      )
      this.RefTypeData.mdlSeq = this.RefTypeData.mdlSeq.replace(/[^0-9]/g, '')
    },
    checkChildrenCode(key) {
      this.RefTypeData.moduleChildrenGrand[
        key
      ].mdlSeq = this.RefTypeData.moduleChildrenGrand[key].mdlSeq.replace(
        /[^0-9]/g,
        ''
      )
      this.RefTypeData.moduleChildrenGrand[
        key
      ].mdlCode = this.RefTypeData.moduleChildrenGrand[key].mdlCode.replace(
        /[^a-zA-Z]/g,
        ''
      )
    },
    uppercase(key) {
      this.RefTypeData[key] = this.RefTypeData[key].toUpperCase()
    },
    upperChildCase(key) {
    },
    resetTree() {
      this.$nextTick(() => {
        this.$refs.vuetree.setCheckedNodes([
          this.data[0].moduleChildrenGrand[0]
        ])
      })
    },
    // 获取代码分类树
    getRefTypeList() {
      checkSysList({
        mdlIsp: 'N'
      }).then(response => {
        if (response.success == 1) {
          this.data = response.data
        }
        this.typeAddDisabled = false // 初始化完成，新增按钮可用
        this.typeEditDisabled = false
        this.typeDelDisabled = false
      })
    },
    // 树节点的点击事件
    handleNodeClick(data) {
      this.currentType = data
      // this.getRefTypeList()
    },
    // 点击基础代码表格的一行，获取到当前行的数据
    getCurrentCodeRow(row) {
      this.currentCode = row
      this.CodeAddDisabled = false
      this.CodeEditDisabled = false
      this.CodeDelDisabled = false
    },
    // 代码分类 -- 添加
    addRefType() {
      if (Object.keys(this.currentType).length == 0) {
        this.$alert('请选择上级菜单！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.codeNum = 0
      this.dialogTitle = '新增模块'
      this.TypeDialogStatus = 'createType'
      this.RefTypeDialogVisible = true
      this.RefTypeData.moduleChildrenGrand = []
      if (!this.currentType.mdlUrl || this.currentType.mdlUrl == '') {
        this.isSecond = true
      } else {
        this.isSecond = false
      }
      this.RefTypeData.mdlLevel = parseInt(this.currentType.mdlLevel) + 1
      this.RefTypeData.mdlValid = 'Y'
      this.RefTypeData.mdlIsp = 'N'
      this.RefTypeData.mdlType = 'M'
    },
    // 代码分类 -- 编辑
    editRefType() {
      if (Object.keys(this.currentType).length == 0) {
        this.$message.error('至少选择一条数据')
        return
      }
      this.dialogTitle = '修改模块'
      this.isChange = false
      this.isSecond = false
      this.TypeDialogStatus = 'updateType'
      this.RefTypeDialogVisible = true
      if (
        !this.currentType.moduleChildrenGrand ||
        this.currentType.moduleChildrenGrand.length == 0
      ) {
        this.currentType.moduleChildrenGrand = [
          {
            mdlName: '',
            mdlCode: '',
            mdlSeq: 1,
            mdlType: 'B',
            mdlValid: 'Y',
            mdlIsp: 'N'
          }
        ]
      }
      this.currentType.sysModuleList = this.currentType.moduleChildrenGrand
      this.RefTypeData = Object.assign({}, this.currentType)
      // 跟新修改人
    },
    // 代码分类 -- 删除
    delRefType() {
      this.$confirm('你确定要删除此数据吗？', {
        closeOnClickModal: false
      })
        .then(() => {
          this.commitDelType(this.currentType)
        })
        .catch(() => {
        })
    },
    // 代码分类 -- 确认删除
    commitDelType(data) {
      delInfoList(data).then(() => {
        this.$message.success({message: '删除成功！'})
        // 删除成功，页面变为重置状态
        this.getRefTypeList()
        this.currentType = {}
        this.currentCodeList = []
        this.typeAddDisabled = false
        this.typeEditDisabled = true
        this.typeDelDisabled = true
        this.CodeAddDisabled = true
        this.CodeEditDisabled = true
        this.CodeDelDisabled = true
      })
    },
    // 代码分类的dialog  先判断是 提交 or 编辑
    commitType() {
      this.$refs['RefTypeData'].validate(valid => {
        if (!valid) {
          return false
        }
        if (this.TypeDialogStatus == 'updateType') {
          this.commitEditType(this.RefTypeData)
        } else if (this.TypeDialogStatus == 'createType') {
          this.commitAddType(this.RefTypeData)
        }
      })
    },
    // 代码分类 -- 编辑--的form表单
    commitEditType(formdata) {
      formdata.sysModuleList = formdata.moduleChildrenGrand
      // formdata.sysModuleList.forEach(m => (m.mdlIsp = 'Y'))
      editInfoList(formdata).then(res => {
        if (res.success == 1) {
          this.$message.success({message: '编辑成功！'})
          this.getRefTypeList()
          this.currentType = {}
          this.currentCodeList = []
          this.typeAddDisabled = false
          this.typeEditDisabled = true
          this.typeDelDisabled = true
          this.RefTypeDialogVisible = false
        }
      })
    },
    // 代码分类 -- 添加--的form表单
    commitAddType(formdata) {
      formdata.sysModuleList = formdata.moduleChildrenGrand
      formdata.mdlParent = this.currentType.mdlCode
      formdata.mdlType = 'M'
      addInfoList(formdata).then(res => {
        if (res.success == 1) {
          this.$message.success({message: '新增分类成功！'})
          // this.lastRefTypeRV_DOMAIN = formdata.RV_DOMAIN
          this.getRefTypeList()
          this.RefTypeDialogVisible = false
        }
      })
    },

    // 基础代码 -- 添加
    addRefCode() {
      this.CodeDialogStatus = 'createCode'
      this.resetRefCode()
    },

    // 功能列表数据 -- 删除
    delRefCode(row, index) {
      this.$confirm('你确定要删除此数据吗？', {
        closeOnClickModal: false
      })
        .then(() => {
          if (row.mdlId) {
            this.commitDelType(row)
            this.RefTypeData.moduleChildrenGrand.splice(index, 1)
            for (let i in this.RefTypeData.moduleChildrenGrand) {
              this.$set(
                this.RefTypeData.moduleChildrenGrand[i],
                'mdlSeq',
                toString(Number(i) + 1)
              )
            }
          } else {
            this.RefTypeData.moduleChildrenGrand.splice(index, 1)
            for (let i in this.RefTypeData.moduleChildrenGrand) {
              this.$set(
                this.RefTypeData.moduleChildrenGrand[i],
                'mdlSeq',
                toString(Number(i) + 1)
              )
            }
          }
        })
        .catch(() => {
        })
    },

    handleTypeDialogClose() {
      this.RefTypeDialogVisible = false
      this.getRefTypeList()
      this.currentType = {}
      this.RefTypeData = {}
    },

    // restet 代码分类
    resetRefType() {
      return (this.RefTypeData = {
        mdlSeq: '0',
        mdlCode: '',
        mdlName: '',
        mdlUrl: '',
        mdlIsp: 'Y',
        mdlValid: 'Y',
        mdlType: 'M',
        mdlLevel: '1',
        moduleChildrenGrand: []
      })
    },
    resetRefCode() {
      if (!this.RefTypeData.moduleChildrenGrand) {
        this.RefTypeData['moduleChildrenGrand'].push({
          mdlName: '',
          mdlCode: '',
          mdlSeq: toString(this.codeNum),
          mdlType: 'B',
          mdlValid: 'Y',
          mdlIsp: 'N'
        })
        return
      }
      this.codeNum = this.RefTypeData.moduleChildrenGrand.length + 1
      this.isChange = false
      this.RefTypeData['moduleChildrenGrand'].push({
        mdlName: '',
        mdlCode: '',
        mdlSeq: toString(this.codeNum),
        mdlType: 'B',
        mdlValid: 'Y',
        mdlIsp: 'N'
      })
    }
  },
  created() {
    this.resize = () => {
      this.maxHeight =
        this.$refs.flexDiv.offsetHeight -
        this.$refs.flexTable.offsetHeight -
        105
    }
  }
}
</script>

<style lang="scss" scoped>
  .app-container {
    overflow: hidden;
    background-color: #fff;
    position: relative;
    height: 100%;
  }

  .tree {
    padding-right: 20px;
    font-size: 1.4rem;
  }

  .right-detail {
    padding-left: 50px;
    height: 100%;
    position: relative;
    padding-top: 25px;

    .bottom-code {
      height: 70%;
      margin-top: 3%;
      display: flex;
      flex-direction: column;

      .flex-table {
        flex: 0%;
        width: 100%;
        overflow: hidden;

        .inner {
          height: 100%;
          width: 100%;
          overflow: hidden;
        }
      }

      .btn-area {
        flex: none;
      }
    }

    .top-type {
      box-sizing: border-box;
      min-height: 30%;
      width: 100%;
      overflow: auto;

      table {
        max-width: 100%;
        font-size: 1.4rem;

        td {
          min-width: 170px;
          line-height: 3rem;
          padding-right: 3rem;
        }
      }
    }
  }

  .btn {
    min-width: 80px;
    padding: 0 20px;
    height: 28px;
  }

  .el-table-add-row {
    margin-top: 10px;
    width: 100%;
    height: 34px;
    border: 1px dashed #c1c1cd;
    border-radius: 3px;
    cursor: pointer;
    justify-content: center;
    display: flex;
    line-height: 34px;
  }

  .title {
    :before {
      content: "*";
      color: #f56c6c;
    }
  }

  .tableStyle {
    .el-table {
      .el-table__body-wrapper
      .el-table__body
      .el-table__row
      tr
      td
      .el-form-item__content
      .el-form-item__error {
        position: relative;
        padding-top: 0px;
      }
    }
  }

  .cell-form {
    .cell {
      overflow: inherit;
    }
  }
</style>
